<template>
	<view class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top" class="theme_bg_color">
				<cu-custom id="nav" :isBack="true" :backColor="'text-black'">
					<block slot="backText"><view class="text-black ">可玩剧本及车队</view></block>
				</cu-custom>
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view
							class="cu-item flex-sub"
							:class="index == TabCur ? 'text-orange cur' : ''"
							v-for="(item, index) in ['可玩剧本', '可拼车队']"
							:key="index"
							@click="tabSelect"
							:data-id="index"
						>
							{{ item }}
						</view>
					</view>
				</scroll-view>
				<van-search :value="search" placeholder="请输入剧本名搜索" @search="searchBusiness" />
			</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="list" v-show="TabCur === 0">
				<view class="grarg theme_bg_vice_color">
					<view class="cu-card">
						<view @click="$goPage('/pageB/script/info?id='+item.id)" class="margin-lr radius12 shadow padding-sm margin-tb-sm theme_bg_color"
							style="position: relative;" v-for="(item,index) in dataList"
							:key="index">
							<view class="flex justify-start">
								<image :src="$isHttp(item.picture)" lazy-load
									style="width: 160rpx;height: 220rpx;border-radius: 10rpx;" mode="aspectFill"></image>
								<view class=" margin-left-sm" style="width: 520rpx;">
									<view class="flex justify-start margin-top-xs">
										<view class="text-bold theme_text_color">{{item.name}}</view>
										<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
									</view>
									<view class="margin-top-sm">
										<view v-for="(item1,index1) in item.smallClasses" :key="index1" v-if="index1<6"
											class="cu-tag sm round" style="background-color: #797979;color: #fff;">
											{{item1.small_name}}
										</view>
									</view>
									<view class="margin-top-sm flex justify-start" style="color: #b2b1b6;">
										<view class="flex justify-start align-center">
											<text class="cuIcon-friendfill text-yellow"></text>
											<view class="text-sm margin-left-xs">{{item.sex_type}}</view>
										</view>
										<view class="flex justify-start align-center margin-left-sm">
											<text class="cuIcon-timefill text-yellow"></text>
											<view class="text-sm margin-left-xs">{{item.hour}}小时</view>
										</view>
										<view class="flex justify-start align-center margin-left-sm">
											<text class="cuIcon-selectionfill text-yellow"></text>
											<view class="text-sm margin-left-xs">{{item.difficulty}}</view>
										</view>
									</view>
									<view class="flex justify-between  margin-top-sm">
										<view class="flex align-end text-yellow">
											<view class="text-sm ">预估价¥</view>
											<view class="text-lg text-bold">{{item.price}}</view>
											<view class="text-sm ">/位</view>
										</view>
										<view 
											class="cu-btn bg-yellow sm round text-black">预约</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="meun" v-show="TabCur === 1">
				<view class="grarg">
					<view class="cu-card article">
						<view @click="$goPage('/pageB/script/AppointmentProgress?id='+item.id)"
							class="cu-item shadow padding-sm theme_bg_color" style="position: relative;"
							v-for="(item,index) in dataList" :key="index"
							>
							<!-- <image src="../../static/icon/zd.png" class="zd" mode=""></image> -->
							<view class="flex justify-start">
								<image :src="$isHttp(item.picture)"
									style="width: 210rpx;height: 290rpx;border-radius: 10rpx;" mode="aspectFill"></image>
								<view class=" margin-left-sm" style="width: 520rpx;">
									<view class="flex justify-start margin-top-xs">
										<view class="text-bold text-black">{{item.name}}</view>
										<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
									</view>
									<view class="margin-top-sm">
										<view v-for="(item1,index1) in item.smallclass" :key="index1"
											class="cu-tag sm round" style="background-color: #3f3f3f;color: #b2b1b6;"
											v-if="index1<6">{{item1.small_name}}</view>
									</view>
									<view class="margin-top-sm">
										<view class="cu-tag sm round">时间：{{item.date}}【{{item.week}}】{{item.time}}</view>
									</view>
									<view class="margin-top-sm flex justify-start" style="color: #b2b1b6;">
										<view class="flex justify-start align-center">
											<text class="cuIcon-friendfill text-yellow"></text>
											<view class="text-sm margin-left-xs">{{item.sex_type}}</view>
										</view>
										<view class="flex justify-start align-center margin-left-sm">
											<text class="cuIcon-timefill text-yellow"></text>
											<view class="text-sm margin-left-xs">{{item.hour}}小时</view>
										</view>
										<view class="flex justify-start align-center margin-left-sm">
											<text class="cuIcon-selectionfill text-yellow"></text>
											<view class="text-sm margin-left-xs">{{item.difficulty}}</view>
										</view>
									</view>
									<view class="flex justify-between  margin-top-sm">
										<view class="flex align-start" style="color: #b2b1b6;">
											<view class="text-sm">门店：<text style="text-decoration: underline"
													@click="$goPage('../business/info?id='+item.storeId)">{{item.storeName}}</text>
											</view>
										</view>
										<view class="cu-btn bg-yellow sm round text-white">组队中
											{{item.Joincount}}/{{item.people}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			dataList: [],
			TabCur: 0,

			search: ''
		};
	},
	onLoad(option) {
		this.$u.vuex('vuex_bussinessEnter',1)
		this.$u.vuex('vuex_bussinessId',option.id)
		this.$u.api.getStoreInfoById({ store_id: option.id }).then(res => {
			this.$u.vuex('vuex_bussiness', res.data);
		});
	},
	onUnload() {
		this.$u.vuex('vuex_bussinessId','')
		this.$u.vuex('vuex_bussiness',{})
		this.$u.vuex('vuex_bussinessEnter',0)
	},

	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
			this.$refs.paging.reload();
		},
		searchBusiness(e) {
			this.search = e.detail;
			this.$refs.paging.reload();
		},
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			this.$u.api
				.diamondPlayList({
					userCarId: this.vuex_userCarId,
					page: pageNo,
					number: pageSize,
					storeId: this.vuex_bussinessId,
					select: this.TabCur,
					name:this.search
				})
				.then(res => {
					this.$refs.paging.complete(res.data.list);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.zuanshika {
	width: 690rpx;
	height: auto;
	background-image: linear-gradient(to right, #2a2a2c, #4e5052);
	margin: 20rpx auto;
	border-radius: 12rpx;
	color: #f8dab0;
}
.item {
	position: relative;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0rpx 30rpx;
}

.item-detail {
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: white;
	background-color: #007aff;
}

.item-line {
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	height: 1px;
	width: 100%;
	background-color: #eeeeee;
}
</style>
